<template>
	<div>
		{{$route.params.name}}---{{$route.params.hobby}}
		<el-carousel indicator-position="outside" :interval="500">
			<el-carousel-item v-for="imgUrl in imgs">
				<img :src="imgUrl" />
			</el-carousel-item>
		</el-carousel>

	</div>
</template>

<script>
	import axios from "axios"
	export default {
		data() {
			return {
				imgs: []
			}
		},
		
		mounted: function() {
			var that  = this;
			axios.get('/test/imgs')
				.then(function(response) {
					that.imgs = response.data;
				})
				.catch(function(error) {
					console.log(error);
				});
		}

	}
</script>

<style>
	.el-carousel__item h3 {
		color: #475669;
		font-size: 18px;
		opacity: 0.75;
		line-height: 300px;
		margin: 0;
	}
	
	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}
	
	.el-carousel__item:nth-child(2n+1) {
		background-color: #d3dce6;
	}
</style>